<template>
  <div class="container">
    <!-- <div class="header-wrapper"></div> -->
    <div
      class="banner-wrapper"
      @mouseenter="mouseEnter"
      @mouseleave="mouseLeave"
    >
      <!-- 大图区域 -->
      <a :href="bannerInfo.url" target="_brank">
        <img :src="bannerInfo.img" class="banners-img" />
      </a>
      <div class="img-desc">
        <!-- 描述图片 -->
        <p class="time">
          <span class="day">{{ bannerInfo.date }}</span>
        </p>
        <p class="city-desc">{{ bannerInfo.title }}</p>
      </div>
      <!-- 输入框 -->
      <div class="search-group">
        <ul class="search-condition">
          <li>
            <label for="all">
              <input
                type="radio"
                name="switch"
                value="all"
                checked
                class="radio"
                id="all"
              />
              全部
            </label>
          </li>
          <li>
            <label for="jiudian">
              <input
                type="radio"
                name="switch"
                value="jiudian"
                class="radio"
                id="jiudian"
              />
              酒店
            </label>
          </li>
          <li>
            <label for="mudidi">
              <input
                type="radio"
                name="switch"
                value="mudidi"
                class="radio"
                id="mudidi"
              />
              目的地
            </label>
          </li>
          <li>
            <label for="qulvxing">
              <input
                type="radio"
                name="switch"
                value="qulvxing"
                class="radio"
                id="qulvxing"
              />
              去旅行
            </label>
          </li>
          <li>
            <label for="jipiao">
              <input
                type="radio"
                name="switch"
                value="jipiao"
                class="radio"
                id="jipiao"
              />
              机票
            </label>
          </li>
        </ul>
        <div class="search-input">
          <input type="text" placeholder="搜目的地/攻略/酒店/旅行特价" />
          <a class="icon"><i class="icon-search"></i></a>
        </div>
      </div>
      <!-- 右侧图片列表 -->
      <div class="right-wrapper">
        <ul class="right-imgList">
          <li
            v-for="(image, index) in banners"
            :key="index"
            :class="isactive === index ? 'active' : ''"
            :id="index"
            @click="changeImg(index)"
          >
            <img :src="image.bannerminList" alt="" />
          </li>
        </ul>
        <div class="right-bottom"></div>
      </div>
    </div>
    <div class="middle-wrapper">
      <MiddleNav />
      <div class="middle-bottom-wapper">
        <BottomLeft :tourList="tourList" />
        <BottomRight />
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetHomeBanners, reqGettouristColumn } from "../../api/index.js";
import MiddleNav from "./middleNav/index";
import BottomLeft from "./bottomLeft/index";
import BottomRight from "./bottomRight/index";
import { mapActions, mapState } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      isactive: 0,
      banners: [],
      tourList: [],
    };
  },
  computed: {
    ...mapState("home", ["type"]),
    bannerInfo: {
      get() {
        if (!this.banners.length) return [];
        let { bannerBigList, date, title, url } = this.banners[this.isactive];
        return {
          img: bannerBigList,
          date,
          title,
          url,
        };
      },
    },
  },
  async mounted() {
    let [bannersRes, tourRes] = await Promise.allSettled([
      reqGetHomeBanners(),
      reqGettouristColumn(),
      this.getArticle({ type: this.type, limit: 10, page: 1 }),
    ]);
    if (bannersRes.status === "fulfilled") {
      this.banners = Object.freeze(bannersRes.value.data.banners);
    }
    if (tourRes.status === "fulfilled") {
      this.tourList = Object.freeze(tourRes.value.data.touristColumn);
    }
    this.timer = setInterval(() => {
      if (this.isactive >= 4) {
        this.isactive = 0;
        return;
      }
      this.isactive++;
    }, 2500);
  },
  components: {
    MiddleNav,
    BottomLeft,
    BottomRight,
  },
  methods: {
    ...mapActions("home", ["getArticle"]),
    changeImg(index) {
      this.isactive = index;
    },
    mouseEnter() {
      clearInterval(this.timer);
    },
    mouseLeave() {
      this.timer = setInterval(() => {
        if (this.isactive >= 4) {
          this.isactive = 0;
          return;
        }
        this.isactive++;
      }, 2500);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="stylus" scoped>
.header-wrapper {
  height: 68px;
  background-color: pink;
}

.banner-wrapper {
  position: relative;
  margin-bottom: 20px;

  .banners-img {
    width: 100%;
  }
}

.img-desc {
  position: absolute;
  top: 25px;
  left: 50%;
  margin-left: -500px;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
}

.img-desc .time {
  font-size: 24px;
}

.img-desc .time .day {
  font-size: 38px;
}

.city-desc {
  font-size: 26px;
}

.search-condition {
  display: flex;
  align-items: center;
}

.search-group {
  position: absolute;
  border-radius: 4px;
  padding: 10px;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6);
}

.search-group .search-condition {
  color: #fff;
  font-size: 14px;

  li {
    width: 70px;
    margin-right: 20px;
    display: flex;
    align-items: center;

    .radio {
      margin-right: 5px;
    }
  }
}

.search-group .search-input {
  display: flex;
}

.search-group .search-input input {
  width: 444px;
  height: 36px;
  padding: 0 10px 0 20px;
  font-size: 14px;
  line-height: 36px;
  outline: none;
  border: 0 none;
  color: #666;
  border-radius: 4px;
}

.search-group .search-input .icon {
  display: block;
  width: 40px;
  height: 36px;
  line-height: 36px;
  margin-left: 5px;
  background-color: #ff9d00;
  border-radius: 4px;
  text-align: center;
  color: #fff;
}

.icon .icon-search {
  display: inline-block;
  width: 24px;
  height: 36px;
  line-height: 36px;
  background-image: url('../../static/images/index/sprite3.png');
  background-position: 0 -105px;
}

.bottom-desc {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 40%);
}

.bottom-desc .special-font {
  background-color: transparent;
  text-decoration: none;
  color: #ff9d00;
}

.right-wrapper {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);

  li {
    height: 62px;
    margin-bottom: 6px;
    overflow: hidden;
    cursor: pointer;

    img {
      width: 100%;
      higeht: 62px;
    }
  }

  .active {
    border: 2px solid #ff9d00;
  }

  .right-bottom {
    width: 110px;
    height: 35px;
    background-image: url('../../static/images/index/sprite1.png');
    background-position: -60px -50px !important;
    line-height: 200px;
    overflow: hidden;
  }
}

.middle-wrapper {
  margin: 0 auto;
  width: 1000px;
}

.middle-bottom-wapper {
  display: flex;
  justify-content: space-between;
}
</style>